import React, { useEffect, useState } from 'react';
import { PageHeader, Descriptions } from 'antd';
import moment from 'moment';
import API from '../../util/api';
import { HeartTwoTone } from '@ant-design/icons';

export default function Detail(props) {
    const [newsInfo, setnewsInfo] = useState(null);

    useEffect(() => {
 
        API.modifyDraft(props.match.params.id, {
            _expand:'category'
        }).then(res => {
            setnewsInfo({
                ...res.data,
                view: res.data.view + 1
            });
            return res.data;
        }).then(res => {
            console.log(res);

            //同步后端  每请求一次访问量加1
            API.passDraft(props.match.params.id, {
                view: res.view + 1
            });
        })
    }, [props.match.params.id]);

    const handleStar = () => {
        setnewsInfo({
            ...newsInfo,
            star: newsInfo.star + 1
        });
        API.passDraft(props.match.params.id, {
            star: newsInfo.star + 1
        });
    }

  return (
    <div>
        {
            newsInfo && <div>
                <PageHeader title={newsInfo.title}
                            subTitle= {<div>
                                {newsInfo.category.title}
                                <HeartTwoTone twoToneColor='#eb2f95' onClick={ () => handleStar()}></HeartTwoTone>
                            </div>}>
                                <Descriptions size='small' column={3}>
                                    <Descriptions.Item label="创建者"> {newsInfo.author} </Descriptions.Item>
                                    <Descriptions.Item label="发布时间">
                                    {
                                        newsInfo.publishTime ? moment(newsInfo.publishTime).format("YYYY/MM/DD HH:mm:ss") : "-"
                                     }
                                    </Descriptions.Item>
                                    <Descriptions.Item label="区域"> {newsInfo.region} </Descriptions.Item>
                                    <Descriptions.Item label="访问数量"> {newsInfo.view} </Descriptions.Item>
                                    <Descriptions.Item label="点赞数量"> {newsInfo.star} </Descriptions.Item>
                                    <Descriptions.Item label="评论数量"> 0 </Descriptions.Item>
                                </Descriptions>
                </PageHeader>
                {/* 将HTML字符串解析为html样式显示 __html*/}
                <div    dangerouslySetInnerHTML={{ __html: newsInfo.content }} 
                        style={{
                            margin:"0 24px",
                            border:"1px solid gray"
                        }}>
                </div>
            </div>
        }
    </div>
  )
}
